<script>
import {ErrorMessage} from "vee-validate"
import useUserStore from '@/stores/user'
import {mapActions} from 'pinia'

export default {
  data() {
    return {
      activeTabClass: 'bg-blue-600',
      tab: 'login',
      // 指定vee-form里的vee-feild的规则
      // key是vee-feild的name属性,值是vee-feild要用的规则名
      schema: {
        name: 'required|min:3|max:12|alpha_spaces',
        email: 'required|min:3|max:30|email',
        // age: '',
        password: 'required|min:3|max:30',
        confirm_password: 'confirmed:@password',
        gender: 'required',
        accept: 'required'
      },
      loginSchema: {
        password: 'required|min:3|max:30',
        email: 'required|min:3|max:30|email',
      }
    }
  },
  methods: {
    ...mapActions(useUserStore, {
      createUser: 'register',
      signIn: "login"
    }),
    changeTab() {
      if (this.tab === 'login') {
        this.tab = 'register'
      } else {
        this.tab = 'login'
      }
    },
    // register(values) {
    //   console.log(values)
    // },
    login(values) {
      this.signIn()
      console.log(values)
      this.$router.push({name: 'home'})
    }
  },
  components: {ErrorMessage}
}
</script>

<template>
  <div class="py-4 text-left px-6">
    <!-- Tabs -->
    <ul class="flex flex-wrap mb-4">
      <li @click="tab='login'" class="flex-auto text-center">
        <a
            class="block rounded py-3 px-4 transition"
            :class="{'bg-blue-600 text-white':tab==='login','text-black':tab!=='login'}"
            href="#"
        >Login</a
        >
      </li>
      <li @click="tab='register'" class="flex-auto text-center">
        <a class="block rounded py-3 px-4 transition"
           :class="{'bg-blue-600 text-white':tab==='register' ,'text-black':tab!=='register'}"
           href="#">Register</a>
      </li>
    </ul>
    <!-- Login Form -->
    <vee-form :validation-schema="loginSchema" @submit="login" v-show="tab === 'login'">
      <!-- Email -->
      <div class="mb-3">
        <label class="inline-block mb-2">Email</label>
        <vee-field
            name="email"
            type="email"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Enter Email"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="email"/>
      </div>
      <!-- Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Password</label>
        <vee-field
            name="password"
            type="password"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Enter Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="password"/>
      </div>
      <button
          type="submit"
          class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
      >
        Submit
      </button>
    </vee-form>
    <!-- Registration Form -->
    <vee-form v-show="tab === 'register'" @submit="createUser" :validation-schema="schema">
      <!-- Name -->
      <div class="mb-3">
        <label class="inline-block mb-2">Name</label>
        <vee-field
            name="name"
            type="text"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Enter Name"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="name"/>
      </div>
      <!-- Email -->
      <div class="mb-3">
        <label class="inline-block mb-2">Email</label>
        <vee-field
            name="email"
            type="email"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Enter Email"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="email"/>
      </div>
      <!-- Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Password</label>
        <vee-field
            name="password"
            type="password"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Enter Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="password"/>
      </div>
      <!-- Confirm Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Confirm Password</label>
        <vee-field
            name="confirm_password"
            type="password"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
            placeholder="Confirm Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="confirm_password"/>
      </div>
      <!-- Gender -->
      <div class="mb-3">
        <label class="inline-block mb-2">Gender</label>
        <vee-field
            as="select"
            name="gender"
            class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
        >
          <option value="0">girl</option>
          <option value="1">boy</option>
        </vee-field>
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="gender"/>
      </div>
      <!-- Accept -->
      <div class="mb-3">
        <vee-field
            type="checkbox"
            value="1"
            name="accept"
            class="w-4 h-4 float-left mt-1 rounded"
        />
        <label class="inline-block mb-2">Accept terms of service</label>
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="accept"/>
      </div>
      <button
          type="submit"
          class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
      >
        Submit
      </button>
    </vee-form>
  </div>
</template>

<style scoped>

</style>